<template>
    <div>
        <el-row>
            <el-col>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/1.jpg" class="image">
                    <div>
                        <span>经典美式</span>

                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/2.jpg" class="image">
                    <div>
                        <span>桃桃冰萃</span>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/3.jpg" class="image">
                    <div>
                        <span>卡布奇诺</span>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/4.jpg" class="image">
                    <div>
                        <span>桂花厚乳拿铁</span>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/5.jpg" class="image">
                    <div>
                        <span>冰博克拿铁</span>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/images/6.jpg" class="image">
                    <div>
                        <span>榛果拿铁</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<style lang="less" scoped>
.el-col {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


    .el-card {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 240px;
        width: 340px;
        margin-bottom: 20px;

        img {

            height: 200px;


        }

        div {
            padding: 14px;
            text-align: center;
        }


    }
}
</style>

<script>
export default {
    data() {
        return {
            currentDate: new Date()
        };
    }
}
</script>